<template>
  <div>
    <div
      class="goods-classify"
      :style="goodsClassifyCss"
      :class="styleType == 2 ? 'flex-layout' : ''"
    >
      <div class="left-hold-place" v-if="styleType == 2">
        <div
          class="tab-item"
          v-for="(item, index) in classifyList"
          :key="index"
        ></div>
      </div>
      <div class="tab-section" :style="goodsTabCss">
        <div :style="moduleBgCss" class="module-bg"></div>
        <!-- 导航tab -->

        <verticalTab
          v-if="styleType == 1"
          :propsData="propsData"
          :active="active"
          @verticalTabChange="changeTab"
          @handleClassifyTabItem="handleClassifyTabItem"
        ></verticalTab>

        <columnTab
          v-if="styleType == 2"
          :propsData="propsData"
          :active="active"
          @changeTab="changeTab"
          @handleClassifyTabItem="handleClassifyTabItem"
        ></columnTab>

        <div class="item-hover" :class="styleType == 2 ? 'width-bigger' : ''">
          <div class="edit-box" @click.stop="editClassifyModule">
            <i class="iconfont icon-mokuai-bianji"></i>
          </div>
        </div>
      </div>

      <!-- tab对应的商品列表 -->
      <div class="goods-list" :style="goodsListCss">
        <div :style="goodsBgCss" class="module-bg"></div>
        <!-- <div class="item-hover">
          <div class="edit-box" @click.stop="toEditGoodsControl">
            <i class="iconfont icon-mokuai-bianji"></i>
          </div>
        </div> -->
        <template v-if="tabGoods.length">
          <!-- 模板样式1 -->
          <goodsDefaultTem
            v-if="goodsType == 1"
            :propsData="propsData"
            :goodsList="tabGoods"
          ></goodsDefaultTem>
          <!-- 模板样式1 -->
          <templateFlexTwo
            v-if="goodsType == 2"
            :propsData="propsData"
            :goodsList="tabGoods"
          ></templateFlexTwo>
          <!-- 模板样式3 -->
          <templateColumn
            v-if="goodsType == 3"
            :propsData="propsData"
            :goodsList="tabGoods"
          ></templateColumn>
          <!-- 模板样式3 -->
          <templateGroup
            v-if="goodsType == 4"
            :propsData="propsData"
            :goodsList="tabGoods"
          ></templateGroup>
        </template>
        <template v-else>
          <!-- 模板样式1 -->
          <goodsDefaultTem
            :propsData="propsData"
            :goodsList="mockData"
          ></goodsDefaultTem>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import verticalTab from "./templates/verticalTab.vue";
import columnTab from "./templates/columnTab.vue";

import { mixinsModuleCss } from "@/components/DiyNew/diy/mixins/index.js";
import goodsDefaultTem from "./components/default.vue";
import templateColumn from "./components/column.vue";
import templateFlexTwo from "./components/flexTwo.vue";
import templateGroup from "./components/flexGroup.vue";
import { list as goodList, arrGoodslist } from "@/api/diy/goods/goods";

export default {
  name: "productClassify",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [mixinsModuleCss],
  components: {
    goodsDefaultTem,
    templateColumn,
    templateFlexTwo,
    templateGroup,
    verticalTab,
    columnTab,
  },
  data() {
    return {
      active: 0,
      tabGoods: [],
      goodsList: [],
      mockData: [
        {
          cover_pic: "",
          id: 0,
          is_negotiable: "0",
          name: "邱肉瑶六一夏季爆款流行收腰显瘦吊带清新小众雪纺 连衣裙清凉少女",
          original_price: "50",
          price: "23.9",
        },
      ],
    };
  },
  mounted() {
    let [item] = this.propsData.params.classifyList.filter((d, index) => {
      return index == this.active;
    });
    if (!item) {
      this.tabGoods = [];
    } else {
      // this.tabGoods = item.data;
      this.getGoodsList(item);
    }

    console.log("分类的数据", this.propsData);
  },
  watch: {
    classifyList: {
      handler(val) {
        console.log(val);
        let [item] = val.filter((d, index) => {
          return index == this.active;
        });
        if (!item) {
          this.tabGoods = [];
        } else {
          this.tabGoods = item.data || [];
        }
      },
      deep: true,
    },
    propsData: {
      handler(val) {
        console.log(val,"商品");

      },
      deep: true,
    }
  },
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
  computed: {
    classifyList() {
      if (this.propsData.params.classifyList.length <= 0) {
        let arr = [];
        for (let i = 0; i < 6; i++) {
          let obj = {
            title: "标题",
            subTitle: "副标题",
            link: null,
            data: null,
            dataFrom: "",
            classifyId: "",
          };
          arr.push(obj);
        }
        return arr;
      }
      return this.propsData.params.classifyList;
    },
    goodsType() {
      // return this.propsData.params.goodsType || "1";
      return 2;
    },
    styleType() {
      return this.propsData.params.styleType || "1";
    },
    tabStyle() {
      return this.propsData.params.tabStyle || "1";
    },
    goodsBgCss() {
      if (!this.propsData.params?.goodsBgCss) return {};
      let style = JSON.parse(JSON.stringify(this.propsData.params.goodsBgCss));

      // if (style.borderRadius) style["borderRadius"] = `${style.borderRadius}px`;
      if (!style.useBackground) {
        return {
          background: "inherit",
        };
      }
      let hSpace = style.padding;
      if (hSpace) {
        style["width"] = `calc(100% - ${hSpace * 2}px)`;
        style["left"] = hSpace + "px";
      }
      return style;
    },
    goodsListCss() {
      if (!this.propsData.params?.goodsBgCss) return {};
      let style = JSON.parse(JSON.stringify(this.propsData.params.goodsBgCss));
      if (style.margin) style.margin = `0 0 ${style.margin}px 0`;
      if (style.padding) style.padding = `0 ${style.padding}px`;
      // if (style.borderRadius) style["borderRadius"] = `${style.borderRadius}px`;
      let obj = {
        margin: style.margin,
        borderRadius: style.borderRadius,
        padding: style.padding,
        position: "relative",
        overflow: "hidden",
      };
      return obj;
    },
    goodsClassifyCss() {
      if (!this.propsData.params?.goodsBgCss) return {};
      let style = JSON.parse(JSON.stringify(this.propsData.params.goodsBgCss));
      if (style.borderRadius) style["borderRadius"] = `${style.borderRadius}px`;
      let obj = {
        borderRadius: style.borderRadius,
        position: "relative",
        overflow: "hidden",
      };
      return obj;
    },
    goodsTabCss() {
      let style = JSON.parse(JSON.stringify(this.propsData.moduleCss));
      if (style.margin) style.margin = `0 0 ${style.margin}px 0`;
      if (style.padding) style.padding = `0 ${style.padding}px`;
      if (style.borderRadius) style["borderRadius"] = `${style.borderRadius}px`;
      let obj = {
        margin: style.margin,
        borderRadius: style.borderRadius,
        padding: style.padding,
        position: this.styleType == 2 ? "absolute" : "relative",
        overflow: "hidden",
      };
      if (this.styleType == 2) {
        obj["backgroundColor"] = this.propsData.params.leftTabBg;
      }
      return obj;
    },
  },
  methods: {
    // 点击切换tab
    changeTab(e) {
      console.log(e);
      let { item, index } = { ...e };
      if (item.dataFrom) {
        this.getGoodsList(item);
      }
      // this.tabGoods = item.data || [];
      this.active = index;
      this.$eventHub.$emit("goodsChassifyTabChange", { index, item });
    },
    getGoodsList(item) {
      let params = {
        pageNo: 1,
        status: 1,
        pageSize: 15,
      };
      if (item.dataFrom == "classify") {
        params["cat_id"] = item.classifyId;
        goodList(params).then((res) => {
          if (res.code == 0) {
            let data = res.data.data;
            this.tabGoods = data;
          }
        });
      }
      if (item.dataFrom == "select") {
        let arr = [];
        if (item.data) {
          item.data.forEach((d) => {
            arr.push(d.id);
          });
        }
        params["goods_id"] = JSON.stringify(arr);
        if (!arr.length) {
          this.tabGoods = [];
          return;
        }
        arrGoodslist(params).then((res) => {
          if (res.code == 0) {
            let data = res.data.data;
            this.tabGoods = data;
          }
        });
      }
    },
    // 点击编辑当前状态
    handleClassifyTabItem(e) {
      this.$emit("chooseMoudle", e);
    },
    // 点击编辑商品control
    toEditGoodsControl() {
      let data = Object.assign({}, this.propsData);
      data.controlComName = "classifyGoodsControl";
      this.handleClassifyTabItem(data);
    },
    // 点击编辑模块
    editClassifyModule() {
      let data = Object.assign({}, this.propsData);
      data.controlComName = "classifyTabControl";
      this.$emit("chooseMoudle", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.module-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}
.goods-classify {
  width: 100%;

  .tab-section {
    width: 100%;
    position: relative;
    .item-hover {
      width: 100%;
      height: 100%;
      border: 1px solid #1890fc;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
      z-index: 1;
      .edit-box {
        width: 20px;
        height: 20px;
        background: #1890fc;
        border-radius: 0px 0px 0px 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        .iconfont {
          font-size: 18px;
          color: #ffffff;
        }
      }
    }
    .width-bigger {
      width: 102%;
    }
  }

  .tab-section:hover > .item-hover {
    display: block;
  }

  .classify-list {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    overflow: hidden;
    .classify-item {
      margin-right: 30px;
      flex-shrink: 0;
      position: relative;
      .classify-name {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 22px;
        color: #262626;
        margin-bottom: 0;
      }
      .active-box {
        width: 100%;
        height: 3px;
        margin-top: 2px;
      }
      .active {
        background: #fa2c1b;
      }
      .item-hover {
        width: 100%;
        height: 100%;
        border: 1px solid #1890fc;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
        .edit-box {
          width: 20px;
          height: 20px;
          background: #1890fc;
          border-radius: 0px 0px 0px 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          position: absolute;
          right: 0;
          top: 0;
          .iconfont {
            font-size: 18px;
            color: #ffffff;
          }
        }
      }
    }
    .classify-item:last-child {
      margin-right: 0;
    }
    .classify-item:hover > .item-hover {
      display: block;
    }
  }
  .tab-list {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    overflow-y: hidden;
    overflow-x: scroll;
  }
  .tab-list::-webkit-scrollbar {
    width: 0;
    height: 0 !important;
  }

  .goods-list {
    width: 100%;
    position: relative;
    .item-hover {
      width: 100%;
      height: 100%;
      border: 1px solid #1890fc;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
      z-index: 11;
      .edit-box {
        width: 20px;
        height: 20px;
        background: #1890fc;
        border-radius: 0px 0px 0px 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        .iconfont {
          font-size: 18px;
          color: #ffffff;
        }
      }
    }
  }
  .goods-list:hover > .item-hover {
    display: block;
  }
}

.flex-layout {
  position: relative;
  overflow: hidden;
  clear: both;
  .tab-section {
    width: 80px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 20px;
    background-color: #ffffff;
  }
  .left-hold-place {
    width: 80px;
    clear: both;
    float: left;
    padding-top: 20px;
    overflow: hidden;
    .tab-item {
      width: 100%;
      height: 45px;
    }
  }
  .goods-list {
    width: 295px;
    padding-top: 11px;
    float: right;
  }
}
</style>
